<template>
 <div class="collection">
 	<!-- 头部 -->
 	<van-sticky :offset-top="0">
 	<van-nav-bar
 	title="信息采集"
 	left-text="返回"
 	left-arrow
 	@click-left="onClickLeft"
 	/>
 	</van-sticky>
 	<!-- 主体 -->
 	<div class="px-3 py-3">
 		<!-- 描写部分 -->
 		<div class="miaoshu bg-white px-3 py-3 mb-3">
 			<van-tag type="primary" class="ai-center"><div class="iconfont icon-jishiben pr-1"></div><div>重要收集</div></van-tag>
 			<div class="d-flex ai-center pt-2">
                <div class="" style="font-weight: bold;">师生疫情信息采集</div>
                <div class="fs-md pl-3 text-primary">{{message.status == 0 ? message.createTime+ ' 已填写': '未填写'}}</div>
            </div>	
 			
 			<div class="d-flex ai-center fs-sm pt-2">
 				<div class="text-grey">发起人：</div><div>校园快药</div>
 			</div>
 			<div class="d-flex ai-center fs-sm pt-2 pb-3 border-bottom">
 				<div class="text-grey">有效时间：</div><div>一周</div>
 			</div>
 			<div class="fs-sm">
 				师生疫情信息采集,请大家认真填写,健康与您同在~
 			</div>

 		</div>
        <!-- 表单 -->
 		<div class="miaoshu bg-white px-3 mb-3">
 			<div class="d-flex jc-around text-dark-1 fs-sm">
 				<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px',fontSize: '12px' }">
 					填写表单
 				</van-divider>
 			</div>
        </div>
        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">1.你是否疑似新冠肺炎患者(隔离/等待隔离)</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.one" :disabled="status === '0'">
        			<van-cell-group>
        				<van-cell title="是" clickable @click="one = '1'">
        					<template #right-icon>      
        						<van-radio name="1" />
        					</template>
        				</van-cell>
        				<van-cell title="否" clickable @click="one = '2'">
        					<template #right-icon>
        						<van-radio name="2" />
        					</template>
        				</van-cell>
        			</van-cell-group>
        		</van-radio-group>
        </div>

        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex">
        		<div class="">2.你是否确诊患有新型肺炎(医生已出具确诊证明)</div><div class="text-pink" style="word-break: keep-all;">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.two" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">是</van-radio>
        		<van-radio name="2">否</van-radio>
        	</van-radio-group>
        </div>

        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">3.你是否接触过疑似或确诊病例</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.three" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">接触过</van-radio>
        		<van-radio name="2">未接触过</van-radio>
        	</van-radio-group>
        </div>

        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">4.你身边是否有刚从武汉归来的亲友</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.four" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">有</van-radio>
        		<van-radio name="2">无</van-radio>
        	</van-radio-group>
        </div>
        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">5.你是否有发热/咳嗽等症状</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.five" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">有</van-radio>
        		<van-radio name="2">无</van-radio>
        	</van-radio-group>
        </div>
        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">6.你是否已返校</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.six" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">是</van-radio>
        		<van-radio name="2">否</van-radio>
        	</van-radio-group>
        </div>

        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">7.目前你的上课方式是？</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.seven" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">到校上课</van-radio>
        		<van-radio class="py-2" name="2">在家上课</van-radio>
        		<van-radio name="3">无</van-radio>
        	</van-radio-group>
        </div>

        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">8.你所在地区是否已经没有确诊</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.eight" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">是</van-radio>
        		<van-radio name="2">否</van-radio>
        	</van-radio-group>
        </div>
        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex ai-center">
        		<div class="">9.疫情对你有什么影响？</div><div class="text-primary">(必填)</div>
        	</div>
        	<van-field
        	v-model="message.nine"
        	rows="2"
        	autosize
            :disabled="status === '0'"
        	type="textarea"
        	maxlength="50"
        	placeholder="请输入留言"
        	show-word-limit
        	/>
        </div>

        <div class="miaoshu bg-white px-3 py-2 mb-3">
        	<div class="d-flex">
        		<div class="">10.本人是否承诺以上所填报的全部内容均属实</div><div class="text-primary" style="word-break: keep-all;">(必填)</div>
        	</div>
        	<van-radio-group v-model="message.ten" :disabled="status === '0'">
        		<van-radio class="py-2" name="1">是</van-radio>
        		<van-radio name="2">否</van-radio>
        	</van-radio-group>
        	
        </div>
        <van-button round block type="info" @click="onSubmit" :disabled="status ==='0'">
        	{{status === '0' ? '已提交' : '提交'}}
        </van-button>
        
 
 	</div>
    
 	
 </div>	
</template>
<script type="text/javascript">
import {Toast} from 'mint-ui'
	export default {
		data(){
			return {
              message : {
                one: '',
                two: '',
                three: '',
                four: '',
                five: '',
                six: '',
                seven: '',
                eight: '',
                nine: '',
                ten: '',
              },
              status: '1',
              user: {}
			}
		},
		methods: {
			onClickLeft(){
				this.$router.go(-1)
			},
            async getData(){
               const res =await this.$http.get('user/findCollectInfo.do')
                if (res.status  == 200) {
                    this.status = res.data.status;
                    if (res.data.status == '0') {
                        this.message = res.data
                    }else {
                        Toast('信息已过期 请重新填写！')
                    }
                    
                    
                }
                
               

            },
			async onSubmit(){
                if (this.message.one && this.message.two &&this.message.three && this.message.four && this.message.five &&this.message.six && this.message.seven && this.message.eight && this.message.nine && this.message.ten) {
                    const res = await this.$http.post('user/collectInfo.do',this.message)
                    console.log(res)
                    if (res.data.code != 0) {
                        this.message = res.data
                        this.status = res.data.status;
                        Toast('提交成功~')
                    }else {
                        Toast('提交失败！')
                    }
                    
                }else {
                    Toast('请确认是否漏填~')
                }

			}
		},
        created(){
            this.user = this.$store.getters.userInfo;
            this.getData();
        },
		mounted() {   //在页面创建之前设置body的背景色
			document.querySelector('body').setAttribute('style', 'background: #f7f8fa')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
	}
</script>

<style lang="scss" scoped>
.miaoshu {
   border-radius: 5%;
}
</style>